<template>
  <md-popup id="popup-container" v-model="value" position="bottom" :has-mask="true" prevent-scroll @hide="cancel">
    <div class="container">
      <div class="upper column centered">
        <div class="left row between">
          <div class="title">请添加备注</div>
          <md-icon name="guanbi" class="guanbi" @click="cancel"></md-icon>
        </div>
        <div class="right">
          <div class="subtitle">顺风车产生高速费、过桥费、停车费等其他费用，均由车主承担。</div>
        </div>
      </div>
      <div class="lower">
        <div class="remark-container">
          <remark-item
            :class="selected.indexOf(item)>-1?'selected':''"
            v-for="(item,index) in remarks"
            :key="index"
            :value="item"
            @click.native="itemClick(item)"
          ></remark-item>
        </div>
      </div>
      <div class="confirm-box">
        <md-button @click="confirm">确认</md-button>
      </div>
    </div>
  </md-popup>
</template>

<script>
import { Popup, Icon, PopupTitleBar, Button } from 'mand-mobile';
import { mapGetters } from 'vuex';
import RemarkItem from './RemarkItem';
export default {
  name: 'remark-selector',
  components: {
    [Popup.name]: Popup,
    [Icon.name]: Icon,
    [PopupTitleBar.name]: PopupTitleBar,
    [Button.name]: Button,
    RemarkItem
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    appendTo: {
      default: () => document.body
    },
    orderRemarks: {
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      selected: [],
      remarks: []
    };
  },
  created() {
    this.remarks = this.orderRemarks.split(';');
  },
  methods: {
    confirm() {
      this.value = false;
      this.$emit('submit', this.selected);
    },
    cancel() {
      this.value = false;
      this.$emit('cancel');
    },
    itemClick(item) {
      let index = this.selected.indexOf(item);
      if (index > -1) {
        this.selected.splice(index, 1);
      } else {
        this.selected.push(item);
      }
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  }
};
</script>
<style lang="stylus" scoped>
#popup-container {
  .container {
    background-color: #fff;
    box-sizing: border-box;

    .upper {
      padding: 30px;

      .left {
        width: 100%;

        .title {
          font-size: 36px;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 36px;
        }

        .guanbi {
          width: 24px;
          height: 24px;
        }
      }

      .subtitle {
        margin-top: 20px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        line-height: 26px;
      }
    }

    .lower {
      box-sizing: border-box;
      padding: 30px;

      .remark-container {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding-bottom: 20px;

        .selected {
          color: theme-color;
          border-color: theme-color;
        }
      }
    }

    .confirm-box {
      box-sizing: border-box;
      padding: 20px;
    }
  }
}
</style>
